import React from 'react';
import { inject, observer } from 'mobx-react';
import { Popover } from 'antd';
import { WeaLocaleProvider, WeaBrowser, WeaAvatar } from 'ecCom';

import E8LeftMenuTop4Email from './E8LeftMenuTop4Email';

const getLabel = WeaLocaleProvider.getLabel;

@inject('portalThemeStore')
@observer
class E8LeftMenuTop extends React.Component {
  constructor(props) {
    super(props);
    this.onVisibleChange = this.onVisibleChange.bind(this);
    this.onOpenCard = this.onOpenCard.bind(this);
    this.onAccountChange = this.onAccountChange.bind(this);
    this.onFontSizeChange = this.onFontSizeChange.bind(this);
    this.onLangChange = this.onLangChange.bind(this);
  }

  componentWillMount() {
    const { portalThemeStore } = this.props;
    portalThemeStore.getAccount();
    portalThemeStore.getAccountMoreMenu();
    portalThemeStore.getTranslatepower();
  }

  componentDidUpdate() {
    let userwidth = $('.e8aside-container .e8left-lmt-hrm-user').width() + 35;
    if (userwidth != null) {
      $('.e8aside-container .e8left-lmt-hrm-dept').css({ 'max-width': `calc( 100% - ${userwidth}px )` });
    }
  }

  render() {
    const { portalThemeStore } = this.props;
    const {
      multiLangs,
      langId,
      themeInfo,
      topMenuObj,
      account,
      accountSize,
      accountList,
      accountListVisible,
      accountMoreMenu,
      fontSettingVisible,
      langSettingVisible,
      translatepower,
      translatepage,
    } = portalThemeStore;

    const { themeData = {}, themeFontSize = '12' } = themeInfo;
    const { hrmcolor } = themeData;

    const { topMenuSelected = {} } = topMenuObj;
    const { id: topMenuId, sname: topMenuName, fname: topMenuName2 } = topMenuSelected;

    const { userid: curuserid, username = '', deptname = '', showSearch } = account;

    let langText = '';
    multiLangs.forEach((item) => item.id == langId && (langText = item.language));

    if (fontSettingVisible) {
      $('.e8left-e9header-font-setting-overlay').css('display', 'block');
    } else {
      $('.e8left-e9header-font-setting-overlay').css('display', 'none');
    }

    if (langSettingVisible) {
      $('.e8left-e9header-lang-setting-overlay').css('display', 'block');
    } else {
      $('.e8left-e9header-lang-setting-overlay').css('display', 'none');
    }

    const aclistCom = (
      <div id="e9header-account-content" className="e9header-account-content">
        {accountSize > 1 ? (
          <div>
            <div className="e9header-account-title">
              <span>{getLabel(131608, '主次账号切换')}</span>
            </div>
            {showSearch ? (
              <div className="e9header-account-search">
                <div className="e9header-account-search-title">
                  <span>{getLabel(507638, '分部')}</span>
                </div>
                <div className="e9header-account-search-browser">
                  <WeaBrowser
                    ecId={`${(this && this.props && this.props.ecId) || ''}_WeaBrowser@9p3nr5`}
                    title={getLabel(507638, '分部')}
                    type={164}
                    isSingle={true}
                    tabs={[
                      { key: '1', name: getLabel(384541, '按组织架构'), selected: false },
                      { key: '2', name: getLabel(130619, '按列表'), selected: false, dataParams: { list: 1 } },
                    ]}
                    hasAdvanceSerach={true}
                    getPopupContainer={() => document.getElementById('e9header-account-content')}
                    onOpen={() => (window.accountListVisible = true)}
                    onClose={() => (window.accountListVisible = false)}
                    onChange={(id) => portalThemeStore.getAccountList(id)}
                  />
                </div>
                <div style={{ clear: 'both' }} />
              </div>
            ) : null}
            <div className="e9header-account-splitter" />
          </div>
        ) : null}
        <div className="e9header-account-list" style={accountSize > 3 ? { overflowY: 'scroll' } : { overflowY: 'hidden' }}>
          {accountList.map((item, index) => {
            let { userid, usertype, username, jobs, subcompanyname, deptname } = item;
            deptname = `${subcompanyname}/${deptname}`;
            deptname = deptname == '/' ? '' : deptname;

            return (
              <div key={index}>
                <div className="e9header-account-item">
                  <div className="e9header-account-item-img" onClick={(e) => this.onOpenCard(e, userid)}>
                    <WeaAvatar ecId={`${(this && this.props && this.props.ecId) || ''}_WeaAvatar@gfzazo@${userid}`} userId={userid} />
                  </div>
                  <div
                    className="e9header-account-item-info"
                    onClick={(e) => {
                      if (userid != curuserid) {
                        this.onAccountChange(userid);
                      } else {
                        this.onOpenCard(e, userid);
                      }
                    }}
                  >
                    {usertype == '0' && (
                      <span className="e9header-account-item-usertype">
                        <i className="icon-coms02-Main-account-number" />
                      </span>
                    )}
                    <span title={username} className="e9header-account-item-username" onClick={(e) => this.onOpenCard(e, userid)}>
                      {username}
                    </span>
                    <span title={jobs} className="e9header-account-item-jobs">
                      {jobs}
                    </span>
                    <br />
                    <div title={deptname} className="e9header-account-item-deptname">
                      {deptname}
                    </div>
                  </div>
                  {accountSize > 1 && userid == curuserid ? <i className="icon-coms02-icon-Completion e9header-account-checked" /> : ''}
                </div>
                <div className="e9header-account-splitter" />
              </div>
            );
          })}
        </div>
        <div className="e9header-account-setting">
          {accountMoreMenu.map((item, index) => {
            if (item.sType == 'font') {
              return (
                <Popover
                  ecId={`${(this && this.props && this.props.ecId) || ''}_Popover@xud0gl`}
                  key={index}
                  trigger="click"
                  placement="leftTop"
                  content={
                    <FontSizeSettingContent
                      ecId={`${(this && this.props && this.props.ecId) || ''}_FontSizeSettingContent@4aqgi9`}
                      fontSize={themeFontSize}
                      onChange={this.onFontSizeChange}
                    />
                  }
                  overlayClassName="e8left-e9header-font-setting-overlay"
                  visible={fontSettingVisible}
                  onVisibleChange={(visible) => portalThemeStore.onFontSettingVisibleChange(visible)}
                >
                  <div className="e9header-account-setting-item" title={item.name} style={{ paddingRight: 100 }}>
                    <i className={item.icon} />
                    <span className="e9header-account-setting-title">{item.name}</span>
                    <span style={{ position: 'absolute', right: '40px' }}>
                      {{ 12: getLabel(149, '默认'), 14: getLabel(18145, '中'), 16: getLabel(18144, '大') }[themeFontSize]}
                    </span>
                    <i className="icon-coms-organization-right" style={{ position: 'absolute', right: '10px' }} />
                  </div>
                </Popover>
              );
            } else if (item.sType == 'language' && multiLangs && multiLangs.length > 1) {
              return (
                <div>
                  <Popover
                    ecId={`${(this && this.props && this.props.ecId) || ''}_Popover@vmax7b`}
                    key={index}
                    trigger="click"
                    placement="leftTop"
                    content={
                      <LangSettingContent
                        ecId={`${(this && this.props && this.props.ecId) || ''}_LangSettingContent@a3rktj`}
                        langId={langId}
                        multiLangs={multiLangs}
                        onChange={this.onLangChange}
                      />
                    }
                    overlayClassName="e8left-e9header-lang-setting-overlay"
                    visible={langSettingVisible}
                    onVisibleChange={(visible) => portalThemeStore.onLangSettingVisibleChange(visible)}
                  >
                    <div className="e9header-account-setting-item" title={item.name} style={{ paddingRight: 100 }}>
                      <i className={item.icon} />
                      <span className="e9header-account-setting-title">{item.name}</span>
                      <span style={{ position: 'absolute', right: '40px' }}>{langText}</span>
                      <i className="icon-coms-organization-right" style={{ position: 'absolute', right: '10px' }} />
                    </div>
                  </Popover>
                  {translatepower == true ? (
                    <div
                      key={`${index}.1`}
                      className="e9header-account-setting-item"
                      title={getLabel(518686, '翻译模式')}
                      onClick={() => {
                        portalThemeStore.setTranslatepage(1);
                        // 左侧菜单高度更正
                        let asdh =
                          $('.e8aside-container').height() - $('.e8aside-container .e8left-lmt').height() - $('.e8aside-container .e8left-lmb').height() - 30;
                        $('.e8aside-container #menuScrollWrapper').css({ height: asdh });
                      }}
                    >
                      <i className="icon-coms02-Translation" />
                      <span className="e9header-account-setting-title">{getLabel(518686, '翻译模式')}</span>
                    </div>
                  ) : null}
                </div>
              );
            }
            return null;
          })}
        </div>
      </div>
    );

    return (
      <div className="e8left-lmt">
        <div className="e8left-lmt-hrm" style={hrmcolor ? { backgroundColor: hrmcolor } : {}}>
          <span
            className={`${deptname == '' ? 'e8left-lmt-hrm-userall' : 'e8left-lmt-hrm-user'}`}
            title={username}
            onClick={() => portalThemeStore.onLoadMain({ mobxrouteurl: '/hrm/card/cardInfo' })}
          >
            {username}
          </span>
          <span className="e8left-lmt-hrm-dept" style={deptname == '' ? { display: 'none' } : {}} title={deptname}>
            {deptname}
          </span>
          {
            <Popover
              ecId={`${(this && this.props && this.props.ecId) || ''}_Popover@jqz0i7`}
              trigger="click"
              placement="bottom"
              content={aclistCom}
              overlayClassName={translatepage == '1' ? 'e8left-account-overlay-tran' : 'e8left-account-overlay'}
              visible={accountListVisible}
              onVisibleChange={this.onVisibleChange}
            >
              <span className="e8left-lmt-account-icon">
                <i className="wevicon-account-arrow" />
              </span>
            </Popover>
          }
        </div>
        <div className="e8left-lmt-tmn" style={topMenuId == '536' ? { borderBottom: 'none' } : {}}>
          <span>{translatepage == '1' ? topMenuName2 : topMenuName}</span>
        </div>
        {topMenuId == '536' ? <E8LeftMenuTop4Email ecId={`${(this && this.props && this.props.ecId) || ''}_E8LeftMenuTop4Email@w997ri`} emailMenu={this.props.emailMenu} onSelect={this.props.onSelect} /> : ''}
      </div>
    );
  }

  onVisibleChange(visible) {
    const { portalThemeStore } = this.props;
    portalThemeStore.onAccountListVisibleChange(visible);
    portalThemeStore.getTranslatepower();

    const themeLayoutMask = document.getElementById('themeLayoutMask');
    if (visible) {
      themeLayoutMask.style.display = 'block';
    } else {
      themeLayoutMask.style.display = 'none';
    }
  }

  onOpenCard(e, userid) {
    e.preventDefault && e.preventDefault();
    e.stopPropagation && e.stopPropagation();

    this.onVisibleChange(false);

    const { portalThemeStore } = this.props;
    portalThemeStore.onLoadMain({ mobxrouteurl: `/hrm/card/cardInfo/${userid}` });
  }

  onAccountChange(userid) {
    const { portalThemeStore } = this.props;
    portalThemeStore.onAccountChange(userid);
  }

  onFontSizeChange(fontSize) {
    const { portalThemeStore } = this.props;
    portalThemeStore.onFontSizeChange(fontSize);
    portalThemeStore.onFontSettingVisibleChange(false);
  }

  onLangChange(langId, langText) {
    const { portalThemeStore } = this.props;
    portalThemeStore.onLangChange(langId, langText);
    portalThemeStore.onLangSettingVisibleChange(false);
  }
}

class FontSizeSettingContent extends React.Component {
  render() {
    const { fontSize } = this.props;
    const selectedComp = <i className="icon-coms-Selected e9header-font-setting-selected" />;

    return (
      <div className="e9header-font-setting-content">
        <div className="e9header-font-setting-item" onClick={() => this.props.onChange('16')}>
          <i className="icon-coms-text" style={{ fontSize: '16px' }} />
          <span style={{ fontSize: '16px', marginLeft: '8px' }}>{getLabel(18144, '大')}</span>
          {fontSize == '16' ? selectedComp : ''}
        </div>
        <div className="e9header-font-setting-item" onClick={() => this.props.onChange('14')}>
          <i className="icon-coms-text" style={{ fontSize: '14px' }} />
          <span style={{ fontSize: '14px', marginLeft: '10px' }}>{getLabel(18145, '中')}</span>
          {fontSize == '14' ? selectedComp : ''}
        </div>
        <div className="e9header-font-setting-item" onClick={() => this.props.onChange('12')}>
          <i className="icon-coms-text" style={{ fontSize: '12px' }} />
          <span style={{ fontSize: '12px', marginLeft: '12px' }}>{getLabel(149, '默认')}</span>
          {fontSize == '12' ? selectedComp : ''}
        </div>
      </div>
    );
  }
}

class LangSettingContent extends React.Component {
  render() {
    const selectedComp = <i className="icon-coms-Selected e9header-lang-setting-selected" />;

    return (
      <div className="e9header-lang-setting-content">
        {this.props.multiLangs.map((item, index) => (
          <div key={index} className="e9header-lang-setting-item" onClick={() => this.props.onChange(item.id, item.language)}>
            <span>{item.language}</span>
            {item.id == this.props.langId ? selectedComp : ''}
          </div>
        ))}
      </div>
    );
  }
}

export default E8LeftMenuTop;
